<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          @click="handleSearch"
          >搜索
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleSubmit"
          v-hasPermi="['device:deviceCheck:success']"
          >审核
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="single"
          @click="open = true"
          v-hasPermi="['device:deviceCheck:revoke']"
          >撤回
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport('#deviceCheck', '点检项目')"
          v-hasPermi="['device:deviceCheck:export']"
          >导出（上表）
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport('#deviceCheckStatus', '点检内容详情')"
          v-hasPermi="['device:deviceCheck:export']"
          >导出（下表）
        </el-button>
      </el-col>
      <Tag type="dot" size="default" color="#0fac09">提交</Tag>
      <Tag type="dot" size="default" color="#0323af">审核</Tag>

      <!-- 分页效果 -->
      <el-col :span="2.2" style="position: absolute; right: 0px; top: 0">
        <Page
          style="margin-right: 0px"
          :current="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          :total="total"
          @on-change="pageChange"
          simple
        ></Page>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <!-- 上表 -->
    <el-table
      highlight-current-row
      border
      stripe
      id="deviceCheck"
      v-loading="loading"
      height="250px"
      :cell-style="iCellStyle"
      :data="deviceCheckList"
      @row-click="clickRowData"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column label="#" type="index" width="40" align="center" />
      <el-table-column
        label="点检单号"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="djmDjbh"
      />
      <el-table-column
        label="点检日期"
        :show-overflow-tooltip="true"
        align="center"
        prop="djmDjrq"
        width="180"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.djmDjrq, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="设备编号"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="djmSbdm"
      />
      <el-table-column
        label="设备名称"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="params.djmName"
      />
      <el-table-column
        label="备注"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="djmDesc"
      />
      <el-table-column
        label="是否提交"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="djmTjflag"
      >
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.djmTjflag"
            active-value="1"
            inactive-value="0"
            disabled
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="撤回原因"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="djmNgdesc"
      />
      <el-table-column
        label="单据状态"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="djmZtbz"
      >
        <template v-slot="scope">
          <dict-tag :options="bplZtbzOptions" :value="scope.row.djmZtbz" />
        </template>
      </el-table-column>
      <el-table-column
        label="建立人员"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="djmJlry"
      />
      <el-table-column
        label="建立日期"
        :show-overflow-tooltip="true"
        align="center"
        prop="djmJlrq"
        width="180"
      >
        <template #default="scope">
          <span>{{
            parseTime(scope.row.djmJlrq, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="审核人员"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="djmShry"
      />
      <el-table-column
        label="审核日期"
        :show-overflow-tooltip="true"
        align="center"
        prop="djmShrq"
        width="180"
      >
        <template #default="scope">
          <span>{{
            parseTime(scope.row.djmShrq, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 下表 -->
    <el-table
      highlight-current-row
      border
      stripe
      id="deviceCheckStatus"
      v-loading="loading"
      height="350px"
      :cell-style="iCellStyle"
      :data="deviceCheckDetail"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column label="#" type="index" width="40" align="center" />
      <el-table-column
        label="点检内容"
        :show-overflow-tooltip="true"
        width="300"
        align="center"
        prop="bnlNrms"
      />
      <el-table-column
        label="点检要求"
        :show-overflow-tooltip="true"
        width="250"
        align="center"
        prop="bnlDesc"
      />
      <el-table-column
        label="点检结果"
        class-name="colorRow"
        style="color: #1ab394"
        :show-overflow-tooltip="true"
        width="250"
        align="center"
        prop="djdDjjg"
      />
      <el-table-column
        label="结果描述"
        :show-overflow-tooltip="true"
        width="250"
        align="center"
        prop="djdDjjg"
      >
        <template v-slot="scope">
          <dict-tag :options="djdOPtions" :value="scope.row.djdDjjg" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 查询对话框   -->
    <el-dialog
      :title="title"
      v-model="openSearch"
      :close-on-click-modal="false"
      draggable
      width="400px"
      append-to-body
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-col :span="24">
          <el-form-item label="建立日期">
            <el-date-picker
              v-model="daterangeDjmJlrq"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="点检单号" prop="djmDjbh">
            <el-input
              v-model="queryParams.djmDjbh"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="设备名称" prop="params.vSbname">
            <el-input
              v-model="queryParams.params.vSbname"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="单号状态" prop="djmZtbz">
            <el-radio-group v-model="queryParams.djmZtbz">
              <el-radio label="1">未审核</el-radio>
              <el-radio label="2">已审核</el-radio>
              <el-radio label="">全部</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            style="margin-top: 25px; display: flex; justify-content: flex-end"
          >
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="handleQuery">确认</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-dialog>

    <!-- 撤回原因弹出框 -->
    <el-dialog
      title="撤回理由"
      v-model="open"
      :close-on-click-modal="false"
      draggable
      width="500px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-col :span="24">
          <el-form-item label="撤回理由" prop="djmNgdesc">
            <el-input
              type="input"
              placeholder="撤回理由"
              v-model="form.djmNgdesc"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleRevoke">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listDeviceCheck,
  getDeviceCheck,
  delDeviceCheck,
  addDeviceCheck,
  updateDeviceCheck,
  listDeviceCheckDetail,
  updateSubmitDeviceCheck,
  updateSuccessDeviceCheck,
  updateRevokeDeviceCheck,
} from "@/api/device/deviceCheck";
import {
  checkPreservePlanRevoke,
  listDeviceAll,
} from "@/api/device/preservePlan";
import { getEffectiveDeviceType } from "@/api/device/deviceType";
import { exportTable } from "@/utils/ruoyi";

export default {
  name: "DeviceCheckAudit",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      openSearch: false,
      // 总条数
      total: 0,
      // 设备点检表格数据
      deviceCheckList: [],
      deviceCheckDetail: [],
      // 点击事件存入全局数据
      rowData: [],
      // 三表所有的设备
      deviceList: [],
      // 设备类型
      deviceTypeList: [],
      // 单据状态字典
      bplZtbzOptions: [],
      // 点检状态字典
      djdOPtions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openDevice: false,
      // 建立日期时间范围
      daterangeDjmJlrq: [
        new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 3),
        new Date(new Date().getTime() + 1000 * 60 * 60 * 24),
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        djmDjbh: null,
        djmZtbz: "1",
        djmJlrq: null,
        djmTjflag: 1,
        params: {
          vSbname: "",
        },
      },
      queryParamsChild: {
        pageNum: 1,
        pageSize: 25,
        params: {
          find: "",
        },
      },
      // 表单参数
      form: {
        params: {
          vSbname: "",
        },
      },
      // 表单校验
      rules: {
        djmSbdm: [
          { required: true, message: "设备类型不能为空", trigger: "change" },
        ],
        djmDjrq: [
          { required: true, message: "点检日期不能为空", trigger: "change" },
        ],
      },
    };
  },
  created() {
    // 获取全部设备类型
    getEffectiveDeviceType().then((res) => {
      this.deviceTypeList = res.data;
      for (let item of this.deviceTypeList) {
        item.dictLabel = item.dtypeName;
        item.listClass = "default";
        item.dictValue = item.dtypeCode;
      }
    });
    this.getAllDicts("device_preserve_plan").then((response) => {
      this.bplZtbzOptions = response.data;
    });
    this.getAllDicts("device_check_status").then((response) => {
      this.djdOPtions = response.data;
    });
    this.getList();
  },
  methods: {
    /** 查询设备点检列表 */
    getList() {
      this.loading = true;
      if (null != this.daterangeDjmJlrq && "" != this.daterangeDjmJlrq) {
        this.queryParams.params["beginDjmJlrq"] = this.moment(
          this.daterangeDjmJlrq[0]
        ).format("YYYY-MM-DD HH:mm:ss");
        this.queryParams.params["endDjmJlrq"] = this.moment(
          this.daterangeDjmJlrq[1]
        ).format("YYYY-MM-DD HH:mm:ss");
      }
      listDeviceCheck(this.queryParams).then((response) => {
        this.deviceCheckList = [];
        this.deviceCheckList = this.deviceCheckList.concat(response.rows);
        this.total = response.total;
        this.loading = false;
      });
    },
    //load
    load() {
      if (
        this.queryParamsChild.pageNum <
        Math.ceil(this.totalAdd / this.queryParamsChild.pageSize)
      ) {
        this.queryParamsChild.pageSize = 25;
        this.queryParamsChild.pageNum++;
        listDeviceAll(this.queryParamsChild).then((res) => {
          this.deviceList = this.deviceList.concat(res.rows);
          this.totalAdd = res.total;
        });
      }
      return 0;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openSearch = false;
      this.reset();
    },
    cancelDevice() {
      this.form.djmSbdm = null;
      this.form.params.vSbname = null;
      this.form.djmType = null;
      this.openDevice = false;
    },
    // 表单重置
    reset() {
      this.form = {
        djmId: null,
        djmDjbh: null,
        djmDjrq: null,
        djmType: null,
        djmSbdm: null,
        djmDesc: null,
        djmTjflag: null,
        djmNgdesc: null,
        djmZtbz: null,
        djmJlry: null,
        djmJlrq: null,
        djmShry: null,
        djmShrq: null,
        params: {},
      };
      this.resetForm("form");
    },
    /** 主界面上表点击事件 */
    clickRowData(row) {
      this.rowData = row;
      this.ids = row.djmId;
      this.single = row.djmZtbz != 1 || row.djmTjflag != 1;

      listDeviceCheckDetail(row.djmDjbh).then((res) => {
        this.deviceCheckDetail = res.data;
      });
    },
    /** 添加设备界面点击事件 */
    handleDevice(row) {
      this.form.djmSbdm = row.bplSbdm;
      this.form.params.vSbname = row.bplName;
      this.form.djmType = row.bplType;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.deviceCheckList = [];
      this.getList();
      this.openSearch = false;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeDjmJlrq = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加设备点检";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const djmId = row.djmId || this.ids;
      getDeviceCheck(djmId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改设备点检";
      });
    },
    handleSearch() {
      this.reset();
      this.title = "查询设备点检";
      this.openSearch = true;
    },
    /** 审核按钮操作 */
    handleSubmit() {
      const djmId = this.rowData.djmId;
      this.$confirm(
        "是否将点检单号 【" +
          this.rowData.djmDjbh +
          "】 审核通过？审核通过后不可修改，请谨慎操作",
        "确认通过",
        {
          confirmButtonText: "通过",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return updateSuccessDeviceCheck(djmId);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("审核成功!");
        });
    },
    /** 撤回按钮操作 */
    handleRevoke() {
      this.form.djmId = this.rowData.djmId;

      updateRevokeDeviceCheck(this.form).then(() => {
        this.msgSuccess("撤回成功");
        this.open = false;
        this.getList();
      });
    },
    /** 导出表按钮操作 */
    handleExport(id, title) {
      exportTable(id, title);
    },
    pageChange(page) {
      this.queryParams.pageNum = page;
      this.getList();
    },
    /** 不同状态显示效果 */
    iCellStyle: function ({ row, column, rowIndex, columnIndex }) {
      // 已提交
      if (row.djmTjflag === "0" && row.djmZtbz === 1) {
        return "padding:0px 0";
      }
      // 已提交，未审核
      else if (row.djmTjflag === "1" && row.djmZtbz === 1) {
        return "padding:0px 0;color:rgb(15, 152, 86)";
      }
      // 已审核
      else if (row.djmTjflag === "1" && row.djmZtbz == 2) {
        return "padding:0px 0;color:rgb(0, 0, 255)";
      }
      // 已结案
      else if (row.djmZtbz === 4) {
        return "padding:0px 0;color:#bb0331";
      }
      // 正常
      else if (row.djdDjjg === "√") {
        return "padding:0px 0;background:rgb(15, 152, 86);color:black";
      }
      // 异常
      else if (row.djdDjjg === "X") {
        return "padding:0px 0;background:#bb0331;color:black";
      }
      // 解除
      else if (row.djdDjjg === "○") {
        return "padding:0px 0;background:yellow;color:black";
      }
      // 休息
      else if (row.djdDjjg === "￠") {
        return "padding:0px 0;background:skyblue;color:black";
      } else {
        return "padding:0px 0";
      }
    },
  },
};
</script>

<style scoped>
.colorRow {
  color: #1ab394;
}
</style>
